<template>
	<view style="height: 400rpx" class="chart-box">
		<l-echart ref="chart"></l-echart>
		<view class="text-box">
			<view class="num">
				60.3%
			</view>
			<view class="name">
				30岁以下
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {}
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				let option = {
					legend: {
						orient: 'vertical',
						right: 'right',
						top: 'center',
						icon: 'square'
					},
					series: [{
						name: '面积模式',
						type: 'pie',
						radius: [40, chart.getWidth() / 4],
						center: ['30%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 0
						},
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 40,
								name: '30岁以下'
							},
							{
								value: 38,
								name: '30岁至40岁'
							},
							{
								value: 32,
								name: '40岁至50岁'
							},
							{
								value: 30,
								name: '50岁至60岁'
							},
							{
								value: 28,
								name: '60岁以上'
							}
						],
						color:['#FEBD38','#68EE76','#FF5CBE','#FE464B','#4FBAF0']
					}]
				}
				chart.setOption(option);

			});
		}
	}
</script>
<style lang="scss" scoped>
	.chart-box{
		position: relative;
		.text-box{
			position: absolute;
			    top: 50%;
			    left: 124rpx;
			    transform: translateY(-50%);
			    width: 135rpx;
			    height: 135rpx;  
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: center;
			    border-radius: 50%;
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0,0,0,0.1);
			.num{
				font-family: DIN-BoldItalic, DIN-BoldItalic;
				font-weight: 400;
				font-size: 44rpx;
				color: #454459;
			}
			.name{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #454459;
			}
		}
	}
</style>